<template>
  <div class="page-body">
    <title-name :title="isPresent === '1' ? '当期数据统计表' : '已完成节点数据统计表'" />
    <div class="gutter-example">
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="6" v-for="(item, index) in totalArr" :key="index">
          <div class="gutter-box">
            <div class="name">{{ item.name }}</div>
            <div class="money">{{ item.money }}</div>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- <a-row :gutter="16" class="totalBox">
      <a-col :span="6" v-for="(item, index) in totalArr" :key="index" class="total gutter-row" :class="'item' + index">
        <div>{{ item.name }}</div>
        <div class="money">{{ item.money }}</div>
      </a-col>
    </a-row> -->
  </div>
</template>

<script>
export default {
  props: {
    // 标题
    isPresent: {
      type: String,
      default: '2'
    },
    // 头部数据
    totalArr: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  mounted() {
  }
}
</script>

<style scoped lang="less">
.gutter-example .ant-row{
  padding: 0 20px;
}
.gutter-example .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  background: #ebf7fa;
  padding: 5px 0;
  text-align: center;
  border-radius: 10px;
}
.name{
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  color: #666;
}
.money {
    color: #487ce9;
    font-size: 34px;
  }
.totalBox {
  padding: 0 20px;
}

.total {
  // padding-left: 10px;
  // padding-right: 20px;
  // margin-right: 30px;
  // height: 65px;
  // line-height: 65px;
  padding: 10px 0;
  text-align: center;
  background: inherit;
  background-color: #ebf7fa;
  // box-sizing: border-box;
  // border-width: 1px;
  // border-style: solid;
  // border-color: #ebf7fa;
  border-radius: 6px;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  color: #666;
  // -webkit-box-shadow: 0px 0px 10px #ebf7fa;
  // box-shadow: 0px 0px 10px #ebf7fa;
 
}
.ant-table-title {
  text-align: right;
  margin-top: -40px;
}
</style>
